---
title: "LangChain JS Configuration"
sidebarTitle: Configuration
description: "Set up Stagehand with LangChain JS to create intelligent web automation agents"
---

This guide walks you through integrating Stagehand with LangChain JS to build powerful web automation workflows using natural language instructions.

## Step 1: Install Dependencies

Install the required packages for LangChain JS and Stagehand integration:

```bash
npm install @langchain/langgraph @langchain/community @langchain/core @browserbasehq/stagehand
```

## Step 2: Configure Environment Variables

For remote browser automation, set up your Browserbase credentials:

```bash
BROWSERBASE_API_KEY="your-browserbase-api-key"
BROWSERBASE_PROJECT_ID="your-browserbase-project-id"
```

## Step 3: Create a Stagehand Instance

Initialize Stagehand with your preferred configuration:

```typescript
import { Stagehand } from "@browserbasehq/stagehand";

// For local development
const stagehand = new Stagehand({
    env: "LOCAL",
    verbose: 2,
    enableCaching: false,
});

// For production with Browserbase
const stagehand = new Stagehand({
    env: "BROWSERBASE",
    verbose: 1,
    enableCaching: true,
});
```

## Step 4: Generate the StagehandToolkit

Create the toolkit that provides LangChain-compatible tools:

```typescript
import { StagehandToolkit } from '@langchain/community/tools/stagehand';

const stagehandToolkit = await StagehandToolkit.fromStagehand(stagehand);
```

## Step 5: Use Individual Tools

The toolkit provides four specialized tools for web automation:

### Available Tools

- **stagehand_navigate**: Navigate to specific URLs
- **stagehand_act**: Perform browser actions (clicking, typing, etc.)
- **stagehand_extract**: Extract structured data using schemas  
- **stagehand_observe**: Analyze page elements and possible actions

### Basic Tool Usage

```typescript
// Navigate to a website
const navigateTool = stagehandToolkit.tools.find(
    (t) => t.name === "stagehand_navigate"
);
await navigateTool.invoke("https://www.google.com");

// Perform an action
const actionTool = stagehandToolkit.tools.find(
    (t) => t.name === "stagehand_act"
);
await actionTool.invoke('Search for "OpenAI"');

// Observe the page
const observeTool = stagehandToolkit.tools.find(
    (t) => t.name === "stagehand_observe"
);
const result = await observeTool.invoke(
    "What actions can be performed on the current page?"
);
console.log(JSON.parse(result));
```

## Step 6: Build LangGraph Agents

Integrate with LangGraph for complex automation workflows:

```typescript
npm install @langchain/langgraph @langchain/community @langchain/core @langchain/openai @browserbasehq/stagehand
import { createReactAgent } from "@langchain/langgraph/prebuilt";

// Create an LLM
const llm = new ChatOpenAI({
    model: "gpt-4",
    temperature: 0,
});

// Create an agent with Stagehand tools
const agent = createReactAgent({
    llm,
    tools: stagehandToolkit.tools,
});

// Execute a complex workflow
const result = await agent.invoke({
    messages: [
        {
            role: "user", 
            content: "Go to example.com, find the contact form, and extract all the form fields"
        }
    ]
});
```

## Advanced Configuration

### Custom Stagehand Configuration

```typescript
const stagehand = new Stagehand({
    env: "BROWSERBASE",
    verbose: 2,
    enableCaching: true,
    headless: true,
    domSettleTimeoutMs: 5000,
});
```

### Error Handling

```typescript
try {
    const result = await agent.invoke({
        messages: [{ role: "user", content: "Navigate to invalid-url.com" }]
    });
} catch (error) {
    console.error("Automation failed:", error);
} finally {
    // Clean up resources
    await stagehand.close();
}
```

## Example Workflows

<Tabs>
  <Tab title="Data Extraction" value="data-extraction" label="TypeScript">
    ```typescript
    const extractionAgent = createReactAgent({
        llm,
        tools: stagehandToolkit.tools,
    });

    const result = await extractionAgent.invoke({
        messages: [{
            role: "user",
            content: `
                Go to news-website.com and extract:
                1. All article headlines
                2. Publication dates  
                3. Author names
                Format as structured JSON
            `
        }]
    });
    ```
  </Tab>
  <Tab title="Form Automation" value="form-automation" label="TypeScript">
    ```typescript
    const formAgent = createReactAgent({
        llm,
        tools: stagehandToolkit.tools,
    });

    const result = await formAgent.invoke({
        messages: [{
            role: "user", 
            content: `
                Navigate to contact-form.com and:
                1. Fill out the contact form with:
                   - Name: John Doe
                   - Email: john@example.com
                   - Message: Inquiry about services
                2. Submit the form
                3. Confirm submission success
            `
        }]
    });
    ```
  </Tab>
  <Tab title="Multi-site Research" value="multi-site-research" label="TypeScript">
    ```typescript
    const researchAgent = createReactAgent({
        llm,
        tools: stagehandToolkit.tools,
    });

    const result = await researchAgent.invoke({
        messages: [{
            role: "user",
            content: `
                Research product pricing by:
                1. Visit competitor1.com and extract pricing info
                2. Visit competitor2.com and extract pricing info  
                3. Compare features and prices
                4. Provide summary analysis
            `
        }]
    });
    ```
  </Tab>
</Tabs>

<CardGroup cols={1}>
  <Card title="LangChain JS Documentation" icon="book" href="https://js.langchain.com/docs/integrations/tools/stagehand/">
    Official LangChain JS documentation for the Stagehand integration
  </Card>
</CardGroup>